//Level2
//David li 20091008

//Market Depth
var RTQ_L2MarketDepth = function(){
    this.containerId = null;
    this.container = null;
    this.id = null;
    this.profile = null;
    this.el = null;
    this.tickerStr = '';
    this.ticker = {};
    this.dataRecords = {};
    this.maxRecord = 20;
	this.rowCountL = 0;
	this.rowCountR = 0;
	this.dgQuote = null;
	this.dgMbp = null;
	this.dgMbol =null;
	this.dgMbor = null;
	this.dgMbml =null;
	this.dgMbmr = null;
	this.arrayMaxSize =10000;
	this.mboIds={l:[],r:[]};
	this.mbpColumn = [{
					align:"center",
	                header: "Orders",
	                dataIndex: 'BidOrder',
	                width: '10%'
	            },{
	                header: "Size",
					align:"center",
	                dataIndex: 'BidSize',
	                width: '20%'
	            },{
	                header: "Bid",
					align:"center",
	                dataIndex: 'BidPrice',
	                width: '20%'
	            },{
	                header: "Ask",
					align:"center",
	                dataIndex: 'AskPrice',
	                width: '20%'
	            },{
	                header: "Size",
					align:"center",
	                dataIndex: 'AskSize',
	                width: '20%'
	            },{
	                header: "Orders",
					align:"center",
	                dataIndex: 'AskOrder',
	                width: '10%'
	            }];
	this.mbolColumn =[{
					align: "center",
					header: "Time",
					dataIndex: 'Time',
					width: '25%'
				}, {
					header: "MMID",
					align: "center",
					dataIndex: 'MMID',
					width: '25%'
				}, {
					header: "Size",
					align: "center",
					dataIndex: 'Size',
					width: '25%'
				}, {
					header: "Bid",
					align: "center",
					dataIndex: 'Price',
					width: '25%'
				}];
	this.mborColumn = [{
					header: "Ask",
					align: "center",
					dataIndex: 'Price',
					width: '25%'
				}, {
					header: "Size",
					align: "center",
					dataIndex: 'Size',
					width: '25%'
				}, {
					header: "MMID",
					align: "center",
					dataIndex: 'MMID',
					width: '25%'
				}, {
					header: "Time",
					align: "center",
					dataIndex: 'Time',
					width: '25%'
				}];
	this.mbmlColumn =[{
						header: "MMID",
						align: "center",
						dataIndex: 'MMID',
						width: '25%'
					}, {
						align: "center",
						header: "Time",
						dataIndex: 'Time',
						width: '25%'
					}, {
						header: "Size",
						align: "center",
						dataIndex: 'Size',
						width: '25%'
					}, {
						header: "Bid",
						align: "center",
						dataIndex: 'Price',
						width: '25%'
					}];
	this.mbmrColumn = [{
						header: "Ask",
						align: "center",
						dataIndex: 'Price',
						width: '33.33%'
					}, {
						header: "Size",
						align: "center",
						dataIndex: 'Size',
						width: '33.33%'
					}, {
						header: "Time",
						align: "center",
						dataIndex: 'Time',
						width: '33.33%'
					}];
	this.quoteColumn =  [{
                header: "Last",
				align:"center",
                dataIndex: 'Last',
                width: '14%'
            },{
                header: "Chg",
				align:"center",
                dataIndex: 'Chg',
                width: '14%'
            },{
                header: "Chg%",
				align:"center",
                dataIndex: 'Chg%',
                width: '14%'
            },{
                header: "Vol(mil)",
				align:"center",
                dataIndex: 'Vol',
                width: '16%'
            },{
                header: "High",
				align:"center",
                dataIndex: 'High',
                width: '14%'
            },{
                header: "Low",
				align:"center",
                dataIndex: 'Low',
                width: '14%'
            },{
                header: "Time",
				align:"center",
                dataIndex: 'Time',
                width: '14%'
            }];
    this.dataPoint = {  //level2
        AMD:'401',
        BidAsk:'402',
        Price:'404',
        Size:'405',
        MMID:'407',
        Id:'409',
        Minute:'-102'
    };
    this.HTML = '<div class="rtq-l2-mkdp">' +
			    '<div class="bd"><div class="title" style="z-index:3"></div>' +
			    '<div class="mboheader">' +
			    	'<div class="mboheaderwrap" style="min-width:400px;position:relative">' +
			    		'<div class="mbolheader rtq-grid rtq-grid-auto" style="float:left;width:49.99%;border:0"></div>' +
			    		'<div class="mborheader rtq-grid rtq-grid-auto" style="float:left;width:49.99%;border:0"></div>' +
			    	'</div>' +
			    '</div>' +
			    '<div class="mbmheader">' +
		    		'<div class="mbmheaderwrap" style="min-width:400px;position:relative">' +
			    		'<div class="mbmlheader rtq-grid rtq-grid-auto" style="float:left;width:49.99%;border:0"></div>' +
			    		'<div class="mbmrheader rtq-grid rtq-grid-auto" style="float:left;width:49.99%;border:0"></div>' +
			    	'</div>' +
		    	'</div>' +
			    '<div class="data" style="">' +
			    	'<div class="mbp"></div>' +
			    	'<div class="mbo" style="position:relative;">' +
			    		'<div class="mbo-wrap clearfix" style="min-width:400px;">' +
			    			'<div class="mbol" style="float:left;width:49.99%;min-height:12px;overflow:hidden"></div>' +
			    			'<div class="mbor" style="float:left;width:49.99%;min-height:12px;overflow:hidden"></div>' +
			    		'</div>' +
			    	'</div>' +
			    	'<div class="mbm" style="position:relative;">' +
		    		'<div class="mbm-wrap clearfix" style="min-width:400px;">' +
		    			'<div class="mbml" style="float:left;width:49.99%;min-height:12px;overflow:hidden"></div>' +
		    			'<div class="mbmr" style="float:left;width:49.99%;min-height:12px;overflow:hidden"></div>' +
		    		'</div>' +
		    	'</div>' +
		    	'</div>' +
			    '</div></div>';
    //this.init();
    this.title = null;
    this.dataScrollPN = null;
	//add by yuntao
	this.uiConfig={};
	this.$settingPanel=null;
	this.modeRatingRBtn=null;
	this.quoteShowCheckBox = null;
	this.mode="MBO";
	this.performanceId=null;
	this.isShowQuote = true;
	this.elSegment={mbo:null,mbohd:null,mbp:null,mbol:null,mbor:null,mbolhd:null,mborhd:null,mbohdwrap:null,title:null};
};
RTQ_L2MarketDepth.prototype = {
    init:function(ContainerId, Ticker, Profile, Sid){
        var self = this;
        this.containerId = ContainerId;
        this.container = $('#'+ContainerId);
        this.id = Sid;
        this.profile = Profile;
        this.el = $(this.HTML);
		this.elSegment.mbohd = this.el.find(".mboheader");
		this.elSegment.mbmhd = this.el.find(".mbmheader");
		this.elSegment.mbo = this.el.find(".mbo");
		this.elSegment.mbp = this.el.find(".mbp");
		this.elSegment.mbm = this.el.find(".mbm");
		this.elSegment.mbol=this.el.find('div.mbol');
		this.elSegment.mbor=this.el.find('div.mbor');
		this.elSegment.mbml=this.el.find('div.mbml');
		this.elSegment.mbmr=this.el.find('div.mbmr');
		this.elSegment.mbolhd=this.el.find('div.mbolheader');
		this.elSegment.mborhd=this.el.find('div.mborheader');
		this.elSegment.mbmlhd=this.el.find('div.mbmlheader');
		this.elSegment.mbmrhd=this.el.find('div.mbmrheader');
		this.elSegment.mbohdwrap=this.el.find('div.mboheaderwrap');
		this.elSegment.mbmhdwrap=this.el.find('div.mbmheaderwrap');
		this.elSegment.title = this.el.find(".title");
        this.title = this.el.find('.title');
        this._createDataGrids();
		if(this.profile.mode){
			this.mode=this.profile.mode;
		}
        this.el.appendTo(this.container);
		this.elSegment.mbo[0].style.display="none";
		this.elSegment.mbohd[0].style.display="none";
		this.elSegment.mbp[0].style.display="none";
		if (this.hasSearch) {
			this.initAutoComplete();
		}
        this.dataScrollPN = new Util.ScrollPanel(this.elSegment.mbo[0], {}, {
            onScroll: function(sl, st){//mboheader
            	if (typeof(self.elSegment) != "undefined") {
					self.elSegment.mbohd.scrollLeft(sl);
				}
            }
        });
		if(typeof(this.profile.showQuote)!="undefined"){
			this.isShowQuote =this.profile.showQuote; 
		}
		this.createSettingPanel();
		//this.modeRatingRBtn.disable(true);
		if(this.profile.ticker){
            this.addTicker(this.profile.ticker);
        }
        this.changeOutSize();
    },
	initUIConfig:function(config){
		$.extend(this.uiConfig, config);
	    var dsettingPanel = this.uiConfig.settingPanel;
	    if (dsettingPanel != null) {
	        this.$settingPanel = $(dsettingPanel);
	    }  
	},
	changeMode:function(mode){
		this.mode=mode;
		this.isShowQuote?this.elSegment.title[0].style.display="":this.elSegment.title[0].style.display="none";
		
		if(gData[this.ticker.gkey].country != 'CAN'){
			if(this.mode=="MBP"){
				this.mode='MBO';	//DEFAULT CHECK
				this.modeRatingRBtn.btns['MBO'].select();
				this.modeRatingRBtn.btns['MBP'].inverse();
			}
			this.modeRatingRBtn.btns['MBP'].disable(true);
		} else{
			this.modeRatingRBtn.btns['MBP'].disable(false);
		}
		
		if(mode=='MBP'){
			this.modeRatingRBtn.disable(false);
			this.elSegment.mbo[0].style.display="none";
			this.elSegment.mbohd[0].style.display="none";
			this.elSegment.mbm[0].style.display="none";
			this.elSegment.mbmhd[0].style.display="none";
			this.elSegment.mbp[0].style.display="";
			this.updateMbp(gData[this.ticker.gkey]);
		}else if(mode == 'MBO'){
			if (gData[this.ticker.gkey]) {
				this.elSegment.mbp[0].style.display="none";
				this.elSegment.mbm[0].style.display="none";
				this.elSegment.mbmhd[0].style.display="none";
				this.elSegment.mbohd[0].style.display="";
				this.elSegment.mbo[0].style.display="";
				if (this.dgMbol != null) {
					this.dgMbol.empty();
					this.dgMbor.empty();
				}
				this.rowCountL=0;
				this.rowCountR=0;
                this.mboIds={l:[],r:[]};
				this.updateMbo(gData[this.ticker.gkey]);
			}
		}else if(mode == 'MBM'){
			if (gData[this.ticker.gkey]) {
				this.elSegment.mbp[0].style.display="none";
				this.elSegment.mbo[0].style.display="none";
				this.elSegment.mbohd[0].style.display="none";
				this.elSegment.mbmhd[0].style.display="";
				this.elSegment.mbm[0].style.display="";
				if (this.dgMbml != null) {
					this.dgMbml.empty();
					this.dgMbmr.empty();
				}
				this.rowCountL=0;
				this.rowCountR=0;
                this.mbmIds={l:[],r:[]};
				this.updateMbm(gData[this.ticker.gkey]);
			}
		}
	},
	updateMbp:function(d,oldData){
		if(typeof(d)=="undefined"||typeof(d["AskPrice_0"])=="undefined"){
			return;
		}
		for(var i =0;i<this.maxRecord;i++){
			if(typeof(d["AskPrice_"+i])=="undefined"&&typeof(d["BidOrder_"+i])=="undefined"&&typeof(d["BidSize_"+i])=="undefined"&&typeof(d["AskPrice_"+i])=="undefined"&&typeof(d["AskSize_"+i])=="undefined"){
				continue;
			}
			this.dgMbp.DOMMap[i+1]["AskOrder"].innerHTML=d["AskOrder_"+i]||"&nbsp;";
			this.dgMbp.DOMMap[i+1]["BidOrder"].innerHTML=d["BidOrder_"+i]||"&nbsp;";
			this.dgMbp.DOMMap[i+1]["BidSize"].innerHTML=d["BidSize_"+i]||"&nbsp;";
			this.dgMbp.DOMMap[i+1]["BidPrice"].innerHTML=d["BidPrice_"+i]||"&nbsp;";
			this.dgMbp.DOMMap[i+1]["AskPrice"].innerHTML=d["AskPrice_"+i]||"&nbsp;";
			this.dgMbp.DOMMap[i+1]["AskSize"].innerHTML=d["AskSize_"+i]||"&nbsp;";
		}
	},
   
    changeOutSize:function(w, h){
        var parent = this.container.parent();
        w = w||parent.width();
        h = h||parent.height()+1;
		var dh = this.isShowQuote?50:5;
		if(this.mode=='MBP'){
			this.el.find('div.mbp').css({height:h-dh});
			this.dgMbp.resize(null,h-dh);
		}else if(this.mode == 'MBO'){
			this.dataScrollPN.reSize(w, h-dh-25);
			var self = this;
			setTimeout(function(){
				if(typeof(self.elSegment)!="undefined"){
					self.elSegment.mbohdwrap.width(self.elSegment.mbo.width());
				}
			}, 200);
			this._clearDgHeaderMarginRight();
		}else if(this.mode == 'MBM'){
			this.dataScrollPN.reSize(w, h-dh-25);
			var self = this;
			setTimeout(function(){
				if(typeof(self.elSegment)!="undefined"){
					self.elSegment.mbmhdwrap.width(self.elSegment.mbm.width());
				}
			}, 200);
			this._clearDgHeaderMarginRight();
		}
		
    },
    addTicker:function(Ticker){ //'XXX:IBM'
        this.tickerStr = Ticker;
		var self = this;
		this.tValidation.checkTickers(this.tickerStr,function(o){
			self.validateCallback(o)
		});
    },
	validateCallback:function(gkeyList){
		var d;
		this.showLoading(true);
		for (var i = 0; i < gkeyList.length; i++) {
			d = gData[gkeyList[i]] ? gData[gkeyList[i]] : gData[gIdMap[gkeyList[i]]];
			if(this.ticker && this.ticker.gkey && this.ticker.gkey == gkeyList[i]){
                this.hideLoading();
				continue;
			}
			if (this.ticker.gkey != '') {
				this.tValidation.unSubscribe([this.performanceId]); // unsubscribe ticker
				for (var o in this.ticker) {
					if (typeof this.ticker[o] == 'string') {
						this.ticker[o] = '';
					}
					else {
						this.ticker[o].empty();
					}
				}
                this.changeOutSize();
			}
			this.ticker.gkey = gkeyList[i];
			this.performanceId=gData[gkeyList[i]]["performanceId"];
            //this.updateQuote(d, {});
			//this.updateQuote(d, d); // force update the price by gData
            this.updateQuote(gkeyList[i],d);
			if(this.setTitle){
            	this.setTitle('Market Depth',gData[this.ticker.gkey].ticker);
            }
			//if(gData[this.ticker.gkey].country!='CAN'){
            if(d.country!='CAN'){
				if(this.mode=="MBP"){
					this.mode='MBO';	//DEFAULT CHECK
					this.modeRatingRBtn.btns['MBO'].select();
					this.modeRatingRBtn.btns['MBP'].inverse();
 				}
				this.modeRatingRBtn.btns['MBP'].disable(true);
			}else{
				this.modeRatingRBtn.disable(false);
				this.modeRatingRBtn.btns['MBP'].disable(false);
			}
			if(this.mode==""){
				this.mode='MBO';	//DEFAULT CHECK
			}
			this.modeRatingRBtn.btns[this.mode].select();
			this.changeMode(this.mode);
			this.changeOutSize(this.w+1,this.h+1);
			this.hideLoading();  
		}
	},
    acceptTicker: function(Ticker){
        this.addTicker(Ticker);
    },
    updateData:function(gKey,d){	
		if (gKey == this.ticker.gkey) {
			this.updateQuote(gKey, d);
			if(this.mode=='MBM'){
				this.updateMbm(gData[gKey]);
			}
			if(this.mode=='MBO'){
				this.updateMbo(gData[gKey]);
			}
			if(this.mode=='MBP'){
				this.updateMbp(gData[gKey],d);
			}
		}		
    },
    updateMbo:function(d){
        var point = this.dataPoint;
        var id = d[point.Id];
		if(this.elSegment.mbo[0].style.display=="none"){
			this.elSegment.mbo[0].style.display=="";
		}
        var amd = d[point.AMD] ? d[point.AMD] : '';
        var size = d[point.Size] ? d[point.Size] : '';
        var price = d[point.Price] ? d[point.Price] : '';
        var time = d[point.Minute] ? d[point.Minute] : '';
        var mmid = d[point.MMID] ? d[point.MMID] : '';
        
        //Shariq: Fixed Bid showing up on right and ask showing up on left.
        var dg = this.dgMbol;
        if (d[point.BidAsk] != 0) {
            dg = this.dgMbor;
        }
		var ty = amd.toString();
		
		if(mmid == null || mmid == ""){
			//return;
			mmid="NYSE";
		}
		
		if(ty=="0"){//empty
			dg.empty();
			 if (d[point.BidAsk] != 0) {
			 	this.rowCountL=0;
			 }else{
			 	this.rowCountR=0;
			 }
            this.changeOutSize();
		}else if(typeof(id) != "undefined"){
			if(ty=="1"){//delete
				if (typeof(dg.DOMMap[id]) == "undefined") {
                    return;
                }
                dg.removeRow(id);
				if (d[point.BidAsk] != 0) {
					this.rowCountL--;
                } else {
					this.rowCountR--;
                }
			}else if(ty=="2"){//add
				if (typeof(dg.DOMMap[id]) != "undefined") {
                    return;
                }
                dg.addRow({Time: FDate(time), MMID: mmid,Price: price,Size: size}, id, 0);				
                if (d[point.BidAsk] != 0) {
					this.rowCountL++;
                    this.mboIds.l.push(id);
                    if (this.mboIds.l.length > this.maxRecord&&this.rowCountL>this.maxRecord) {
                        dg.removeRow(this.mboIds.l[this.mboIds.l.length - this.rowCountL]);
						this.rowCountL--;
                    }
					if(this.mboIds.l.length==this.arrayMaxSize){
						this.mboIds.l=this.mboIds.l.slice(this.arrayMaxSize-this.maxRecord);
					}
                } else {
					this.rowCountR++;
                    this.mboIds.r.push(id);
                    if (this.mboIds.r.length > this.maxRecord&&this.rowCountR>this.maxRecord) {
                        dg.removeRow(this.mboIds.r[this.mboIds.r.length - this.rowCountR]);
						this.rowCountR--;
                    }
					if(this.mboIds.r.length==this.arrayMaxSize){
						this.mboIds.r=this.mboIds.r.slice(this.arrayMaxSize-this.maxRecord);
					}
                }
				
				if(Math.max(this.rowCountL, this.rowCountR) < this.maxRecord - 1){
					this.changeOutSize();
				}
				
			}else if(ty=="3"&&typeof(dg.DOMMap[id]) != "undefined"){//update
                dg.DOMMap[id]["Time"].innerHTML = FDate(time);
                dg.DOMMap[id]["MMID"].innerHTML = mmid;
                dg.DOMMap[id]["Price"].innerHTML = price;
                dg.DOMMap[id]["Size"].innerHTML = size;
			}
		}
    },
    updateMbm:function(d){
        var point = this.dataPoint;
        var id = d[point.Id];
		if(this.elSegment.mbm[0].style.display=="none"){
			this.elSegment.mbm[0].style.display=="";
		}
        var amd = d[point.AMD] ? d[point.AMD] : '';
        var size = d[point.Size] ? d[point.Size] : '';
        var price = d[point.Price] ? d[point.Price] : '';
        var time = d[point.Minute] ? d[point.Minute] : '';
        var mmid = d[point.MMID] ? d[point.MMID] : '';
        var exchangeVisible = [];
        
        var dg = this.dgMbml;
        var otherSide = this.dgMbmr;	//Shariq:	this will provide a symmetrical line-up of Bid and Ask
        if (d[point.BidAsk] != 0) {
            dg = this.dgMbmr;
            otherSide = this.dgMbml;
        }
		var ty = amd.toString();
		if(mmid == null || mmid == ""){
			//return;
			mmid="NYSE";
		}
		id = mmid;
		if(ty=="0"){//empty
			dg.empty();
			otherside.empty();
			 if (d[point.BidAsk] != 0) {
			 	this.rowCountL=0;
			 }else{
			 	this.rowCountR=0;
			 }
            this.changeOutSize();
		}else if(typeof(id) != "undefined"){
			if(ty=="1"){//delete
				if (typeof(dg.DOMMap[id]) == "undefined") {
                    return;
                }
				dg.removeRow(id);
				if (d[point.BidAsk] != 0) {
					this.rowCountL--;
                } else {
					this.rowCountR--;
                }
			}else if(ty=="2"){//add
				exchangeVisible[exchangeVisible.length == 0 ? exchangeVisible.length : exchangeVisible.length + 1] = mmid;
				//Shariq:	ty is never 3, therefore, need to detect the update when ty =2
				if(exchangeVisible.indexOf(mmid) != -1){
					if(dg.DOMMap[id] != null){
						//just update it -- only update the cell that is changing
						dg.DOMMap[id]["Time"].innerHTML = FDate(time);
						if(dg == this.dgMbml){
							dg.DOMMap[id]["MMID"].innerHTML = mmid;
						}
		                if(dg.DOMMap[id]["Price"].innerHTML != price){
		                	dg.DOMMap[id]["Price"].innerHTML = price;
		                	flash(dg.DOMMap[id]["Price"], null, "100");
		                }
		                if(dg.DOMMap[id]["Size"].innerHTML != size){
		                	dg.DOMMap[id]["Size"].innerHTML = size;
		                	flash(dg.DOMMap[id]["Size"], null, "100");
		                }
		                return;
					}
				}

				if(dg == this.dgMbml){
					dg.addRow({MMID: mmid, Time: FDate(time), Size: size, Price: price}, id, 0);
					if(otherSide.DOMMap[id] == null){
						otherSide.addRow({Price: "", Size: "", Time: ""}, id, 0);
					}
				} else{
					dg.addRow({Price: price, Size: size, Time: FDate(time)}, id, 0);
					if(otherSide.DOMMap[id] == null){
						otherSide.addRow({MMID: mmid, Time: "", Size: "", Price: ""}, id, 0);
					}
				}

					this.rowCountL++;
                    this.mbmIds.l.push(id);
                    if (this.mbmIds.l.length > this.maxRecord&&this.rowCountL>this.maxRecord) {
                        dg.removeRow(this.mbmIds.l[this.mbmIds.l.length - this.rowCountL]);
						this.rowCountL--;
                    }
					if(this.mbmIds.l.length==this.arrayMaxSize){
						this.mbmIds.l=this.mbmIds.l.slice(this.arrayMaxSize-this.maxRecord);
					}
				if(Math.max(this.rowCountL, this.rowCountR) < this.maxRecord - 1){
					this.changeOutSize();
				}
				
			}else if(ty=="3"&&typeof(dg.DOMMap[id]) != "undefined"){//update
				dg.DOMMap[id]["Time"].innerHTML = FDate(time);
                dg.DOMMap[id]["MMID"].innerHTML = mmid;
                dg.DOMMap[id]["Price"].innerHTML = price;
                dg.DOMMap[id]["Size"].innerHTML = size;
			}
		}
    },
	 updateQuote:function(gkey,oldData){  // o is the data record in gData. oldData is from push server.
		var data ={Symbol:null,Last:null,Chg:null,"Chg%":null,Vol:null,High:null,Low:null,Time:null}
        if(this.dgQuote.getRowLength()==0){
			this.dgQuote.addRow(data,"quote");
		}
		var AHData=push.proxy.getMarketQuoteData(gkey);
		var o=gData[gkey];
        if(typeof oldData.LastPrice!='undefined'){
            var last=typeof oldData.LastPrice.value!='undefined'?oldData.LastPrice.value:AHData.LastPrice.value;
            var oLast=oldData.LastPrice.oValue;
            this.dgQuote.DOMMap["quote"]["Last"].innerHTML=parseFloat(last).toFixed(2);
            flash(this.dgQuote.DOMMap["quote"]["Last"], last, oLast);
        }
        if(typeof oldData.Chg!='undefined'){
            var chg=typeof oldData.Chg.value!='undefined'?oldData.Chg.value:AHData.Chg.value;
            var oChg=oldData.Chg.oValue;
            this.dgQuote.DOMMap["quote"]["Chg"].innerHTML="<span style='color:"+(parseFloat(chg).toFixed(2)>=0?QS_Style.greenFontColor : QS_Style.redFontColor)+"'>"+parseFloat(chg).toFixed(2)+"<span>";
            flashWithDirectional(this.dgQuote.DOMMap["quote"]["Chg"], chg, oChg,chg>=0);
        }
        if(typeof oldData["Chg%"]!='undefined'){
            var chgp=typeof oldData["Chg%"].value!='undefined'?oldData["Chg%"].value:AHData["Chg%"].value;
            var oChgp=oldData["Chg%"].oValue;
            this.dgQuote.DOMMap["quote"]["Chg%"].innerHTML="<span style='color:"+(parseFloat(chgp).toFixed(2)>=0?QS_Style.greenFontColor : QS_Style.redFontColor)+"'>"+parseFloat(chgp).toFixed(2)+"<span>";
            flashWithDirectional(this.dgQuote.DOMMap["quote"]["Chg%"], chgp, oChgp,chgp>=0);
        } 
        if(typeof oldData.Volume!='undefined'){
            var volume=typeof oldData.Volume.value!='undefined'?oldData.Volume.value:o.Volume;
            this.dgQuote.DOMMap["quote"]["Vol"].innerHTML=parseFloat((volume/1000000)).toFixed(4);
            flash(this.dgQuote.DOMMap["quote"]["Vol"], null, null);
        }
        
        if(typeof oldData.Time!='undefined'){
            var time=typeof oldData.Time.value!='undefined'?oldData.Time.value:AHData.Time.value;
            this.dgQuote.DOMMap["quote"]["Time"].innerHTML=FDate(time);
        }
        if(typeof oldData.HighPrice!='undefined'){
            var highPrice=typeof oldData.HighPrice.value!='undefined'?oldData.HighPrice.value:o.HighPrice;
            this.dgQuote.DOMMap["quote"]["High"].innerHTML=highPrice;
        }
        if(typeof oldData.LowPrice!='undefined'){
            var lowPrice=typeof oldData.LowPrice.value!='undefined'?oldData.LowPrice.value:o.LowPrice;
            this.dgQuote.DOMMap["quote"]["Low"].innerHTML=lowPrice;
        }
    },
	createSettingPanel:function(){
		var self=this;
		this.$settingPanel.html('<div class="l2-mode"></div><div class="quote-show"></div>');
		var modeDDLDom=this.$settingPanel.find('.l2-mode');
		var modeData=[{
				txt: "Market By Order",
			    val: "MBO"
		    }, {
		        txt: "Market By Price",
		        val: "MBP"
		    }, {
		    	txt: "Market By MMID",
		        val: "MBM"
		    }];
		
		this.modeRatingRBtn = new Util.ButtonGroup(modeDDLDom, modeData, {
            onClick: function(v){
               self.changeMode(v);
			   if(v=="MBP"){
			   		self.changeOutSize(self.w+1,self.h+1);
			   }
            }
        },{
			vertical:true,
			inverse:false
		});
		this.quoteShowCheckBox = new Util.ButtonGroup(this.$settingPanel.find('.quote-show'), [{txt:'Show Quote',val:'show'}], {
            onClick: function(v, btn){
				self.isShowQuote = btn.isSelected;
				if(btn.isSelected){
					self.elSegment.title[0].style.display="";
				}else{
					self.elSegment.title[0].style.display="none";
				}
				self.changeOutSize();
            }
        },{type:'checkbox'});
		if(this.isShowQuote){
			this.quoteShowCheckBox.btns["show"].select();
		}
	},
	 _createDataGrids:function(){
        this.dgQuote = new Util.DataGrid(this.el.find('div.title'), {}, {
            column: this.quoteColumn,
            width: this.w,
            height: 60,
            htmlLayer: 'div',
			autoWidth: true,
			autoHeight: true,
            indexColKey: 'RID',
            sortable: false
        }, {});
        this.ticker = {
            gkey: '',
            serviceName: '',
            itemName: ''
        };
        this.dgMbol = new Util.DataGrid(this.el.find('div.mbol'), {}, {
            column: this.mbolColumn,
            height: 420,
            htmlLayer: 'div',
            autoWidth: true,
			autoHeight: true,
            indexColKey: 'RID',
            sortable: false,
			showYScrollbar: false
        }, {});
        
        this.dgMbor = new Util.DataGrid(this.el.find('div.mbor'), {}, {
            column: this.mborColumn,
            height: 420,
            htmlLayer: 'div',
            autoWidth: true,
			autoHeight: true,
            indexColKey: 'RID',
            sortable: false,
			showYScrollbar: false
        }, {});
        this.dgMbml = new Util.DataGrid(this.el.find('div.mbml'), {}, {
            column: this.mbmlColumn,
            height: 420,
            htmlLayer: 'div',
            autoWidth: true,
			autoHeight: true,
            indexColKey: 'RID',
            sortable: false,
			showYScrollbar: false
        }, {});
        
        this.dgMbmr = new Util.DataGrid(this.el.find('div.mbmr'), {}, {
            column: this.mbmrColumn,
            height: 420,
            htmlLayer: 'div',
            autoWidth: true,
			autoHeight: true,
            indexColKey: 'RID',
            sortable: false,
			showYScrollbar: false
        }, {});
        this.dgMbp = new Util.DataGrid(this.el.find('div.mbp'), {}, {
            column: this.mbpColumn,
            width: this.w,
            htmlLayer: 'div',
            autoWidth: true,
            indexColKey: 'RID',
            sortable: false
        }, {});
		for(var i =0;i<this.maxRecord;i++){
			var tdata = {BidOrder:"   ",BidSize:"&nbsp;",BidPrice:" ",AskPrice:" ",AskSize:" ",AskOrder:" "};
			this.dgMbp.addRow(tdata,i+1);
		}
		this.dgMbol.header.el.appendTo(this.elSegment.mbolhd);
		this.dgMbor.header.el.appendTo(this.elSegment.mborhd);
		this.dgMbml.header.el.appendTo(this.elSegment.mbmlhd);
		this.dgMbmr.header.el.appendTo(this.elSegment.mbmrhd);
		this._clearDgHeaderMarginRight();
    },
	_clearDgHeaderMarginRight:function(){
		this.dgMbol.header.el[0].style.marginRight = '0';
        this.dgMbor.header.el[0].style.marginRight = '0';
        this.dgMbml.header.el[0].style.marginRight = '0';
        this.dgMbmr.header.el[0].style.marginRight = '0';
	},
    autoCPCallback:function(o){
        this.addTicker(o);
    },
    saveConfig:function(){
        return { ticker: this.tickerStr, title: this.getTitle(),showQuote:this.isShowQuote,mode:this.mode };
    },
    reSubscribe:function(){
		if (this.ticker.gkey != ''&&this.ticker.gkey.length>0) {
			this.tValidation.checkTickers([this.performanceId]);
		}
	},
    stopSubscribe:function(){
		if (this.ticker.gkey != ''&&this.ticker.gkey.length>0) {
			this.tValidation.unSubscribe([this.performanceId]); // unsubscribe ticker
		} 
	},
    clear:function(){
		if(this.ticker.gkey!=''&&this.ticker.gkey.length>0){
			this.tValidation.unSubscribe([this.performanceId]);  // unsubscribe ticker.
		}
        for(var p in this){
            if(!p || p == 'clear'){continue;}
            this[p] = null;
            delete this[p];
        }
    }
};

